<template>
  <div class="container max-w-6xl p-4 bg-white bg-opacity-60 my-4 rounded-lg backdrop-blur-md">
    <div class="flex justify-center text-2xl font-bold">{{ article?.title }}</div>
    <div class="flex items-end">
      <img :src="user?.avatar + '/thumb'" alt="头像" height="36" width="36" class="rounded-full mr-2" />
      <span class="text-xl">{{ user?.username }}</span>
    </div>
    <div class="ql-editor" v-html="article?.content"></div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'Article',
})
</script>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { getArticle } from '@/api/user/article'
import { getUserInfo } from '@/api/user/user'
import { useToast } from 'primevue/usetoast'

import 'quill/dist/quill.core.css'

const props = defineProps<{ id: string }>()

let toast = useToast()

const article = ref<any>()
const user = ref<LoginUser>()

function _getArticle() {
  getArticle(props.id)
    .then(res => {
      article.value = res.data
      getUserInfo(article.value.uid)
        .then(res => {
          user.value = res.data
        })
    })
    .catch(err => {
      toast.add({
        severity: 'error',
        summary: '获取失败',
        detail: err.data.msg,
        life: 3000,
      })
    })
}

_getArticle()

</script>

<style>
.ql-editor {
  @apply bg-white my-2 rounded-md;
}

.ql-editor h1 {
  font-size: 2rem !important;
}
.ql-editor h2 {
  font-size: 1.5rem !important;
}
.ql-editor h3 {
  font-size: 1.17rem !important;
}
</style>